<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">
      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            用户资料
          </div>
          <div class="user-info">
            <div class="main-returns">
              <i class="el-icon-arrow-left" @click="returns()"></i>
              <span @click="returns()">返回</span>
            </div>
            <table>
              <tr>
                <td>用户账号：</td>
                <td>{{userData.mobile}}</td>
              </tr>
              <tr>
                <th>用户实名：</th>
                <th>{{userDatas.real_name}}</th>
              </tr>
              <tr>
                <th>用户身份证号：</th>
                <th>{{userDatas.idcard_no}}</th>
              </tr>
              <tr>
                <th>用户认证身份：</th>
                <th>{{userData.role_zh}}</th>
              </tr>
              <tr>
                <th>申请认证时间：</th>
                <th>{{userData.create_time}}</th>
              </tr>
              <tr>
                <th>状态：</th>
                <th>{{userData.auth_status| statusType}}</th>
              </tr>
              <tr>
                <th>所属地区：</th>
                <th>{{region(userDatas.province_zh ,userDatas.city_zh ,userDatas.area_zh)}}</th>
              </tr>
              <tr>
                <th>位置：</th>
                <th>{{userDatas.address}}</th>
              </tr>
              <tr>
                <th>认证资料：</th>
                <th>
                  <img :src=userDatas.auth_img_id alt="">
                  <img :src=userDatas.auth_img_rev_id alt="">
                </th>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import user from "@/api/user";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "userManagement",
      uid: this.$route.params.uid,
      userData: "",
      userDatas: ""
    };
  },
  methods: {
    region(area1, area2, area3) {
      const areas1 = area1 ? area1 : "";
      const areas2 = area2 ? area2 : "";
      const areas3 = area3 ? area3 : "";
      return areas1 + areas2 + areas3;
    },
    getUser() {
      const options = {
        user_id: this.uid
      };
      user.getUserIn(options).then(res => {
        if (res.code == 1) {
          this.userData = res.data.info;
          this.userDatas = res.data.info.user_info;
        }
      });
    },
    returns() {
      history.go(-1);
    }
  },
  mounted() {
    this.getUser();
  },
  filters: {
    statusType(val) {
      let type;
      if (val == 1) {
        type = "未认证";
      } else if (val == 2) {
        type = "已认证";
      } else if (val == 3) {
        type = "审核中";
      }
      return type;
    }
  }
};
</script>

<style lang="less">
.user-info {
  padding: 40px 0 40px 40px;
  background: #ffffff;
  table {
    width: 600px;
    tr {
      height: 40px;
      line-height: 40px;
      td {
        &:nth-child(1) {
          width: 120px;
          text-align: left;
        }
        &:nth-child(2) {
          width: 480px;
          text-align: left;
        }
      }
      th {
        text-align: left;
        img {
          width: 200px;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
